<template>
    <div class="change">
        <hb-title-levels :list="paths" />
        <hb-box class="mar"
            title="修改登陆密码">
            <form class="form">
                <h6 class="label">
                    原登录密码
                </h6>
                <hb-signupPassword @ipt="e_re"
                    :hiddTip="true"
                    formType="password"
                    back="password" />

                <h6 class="label">
                    新登录密码
                </h6>
                <hb-signupPassword @ipt="e_re"
                    formType="newpassword"
                    back="newpassword" />

                <h6 class="label">
                    人机验证码
                </h6>
                <div class="fcb">
                    <hb-input class="imgcode"
                        @ipt="e_re"
                        formType="imgCode"
                        back="imgCode" />
                    <img class="img"
                        :src="imgCode"
                        @click="api_getimg">
                </div>

                <h6 class="label">
                    手机验证码
                </h6>
                <hb-vercode @ipt="e_re"
                    formType="vercode"
                    back="vercode"
                    @clk="e_send" />

                <hb-button class="btn"
                    txt="修改"
                    @clk="e_change" />
            </form>
        </hb-box>
        <hb-dialog v-if="msgback !== ''"
            @clk="e_closeDialog"
            class="dialog">
            <h3 class="hmsg"
                v-text="msgback"></h3>
        </hb-dialog>
    </div>
</template>

<script>
import {vpost, vlink} from '@api'
export default {
	name: 'change',
	data() {
		return {
			paths: [{txt: '账号安全', path: 'safe'}, {txt: '修改登录密码', path: 'change'}],
			msgback: '',
			imgCode: '',
			form: {
				password: null,
				newpassword: null,
				vercode: null,
				imgCode: null,
			},
			checkRe: {
				password: false,
				newpassword: false,
				vercode: false,
				imgCode: false,
			},
		}
	},
	created() {},
	mounted() {
		this.api_getimg()
	},
	methods: {
		e_back_() {
			this.$router.push('/safe')
		},
		// 获取图片验证码
		api_getimg() {
			this.imgCode = ''
			setTimeout(() => {
				let r = (Math.random() * 100) | 0
				this.imgCode = vlink.checkCode.signup.img + r
	
			}, 10)
		},
		// 获取表单输入内容
		e_re(re, inputed, back) {
			this.checkRe[back] = re
			this.form[back] = inputed
		},
		// 关闭提示框
		e_closeDialog() {
			this.msgback = ''
			this.clearCodeTimer = Math.random() * 2
		},
		e_send() {
			if (!this.checkRe.imgCode) {
				this.msgback = '请输入图片验证码'
				return false
			}
			let smsdata = {
				type: 6,
				phone: sessionStorage.getItem('name'),
				vcode: this.form.imgCode,
			}
			vpost(vlink.checkCode.signup.phone, smsdata).then(re => {
				if (re.code == 0) {
					this.msgback = '发送成功请注意查收'
					this.closeMsg()
				} else {
					this.msgback = re.msg
				}
			})
		},
		// 最后的验证
		check(callback) {
			let changedata = {
				pwdType: 0,
				originPwd: this.form.password,
				newPwd: this.form.newpassword,
				reNewPwd: this.form.newpassword,
				phoneCode: this.form.vercode,
			}
			if (changedata.originPwd == null) {
				this.msgback = '请输入原始密码'
				this.closeMsg()
				return false
			}
			if (changedata.newPwd == null) {
				this.msgback = '请输入新密码'
				this.closeMsg()
				return false
			}
			if (changedata.phoneCode == null) {
				this.msgback = '请输入短信验证码'
				this.closeMsg()
				return false
			}
			callback(changedata)
		},
		e_change() {
			this.check(changedata => {
				vpost(vlink.changepwd, changedata).then(re => {
					this.msgback = re.msg
					this.closeMsg()
					if (re.status == 1) {
						//退出重新登录
						setTimeout(() => {
							sessionStorage.clear()
							this.$router.push('/')
							location.reload()
						}, 1300)
					}
				})
			})
		},
		closeMsg() {
			setTimeout(() => {
				this.msgback = ''
			}, 1300)
		},
	},
}
</script>

<style scoped>
.mar {
	margin: 20px 0;
	overflow: hidden;
}
.form {
	margin: 40px auto;
	width: 600px;
}
.label {
	margin: 10px 0;
	font-weight: 400;
	font-size: 14px;
	color: #61688a;
}
.btn {
	display: block;
	margin: 20px auto;
}
.dialog {
	color: var(--clr0);
}
.hmsg {
	padding: 0 20px;
}
.imgcode {
	width: 75%;
}
.img {
	border-radius: 4px;
	height: 48px;
}
</style>